<template>
  <div class="ranking">
    <div class="ranking-ellipse"></div>
    <!-- <div class="ranking-overview">
            最新风险等级为<span
                class="ranking-emphasize"
                :style="`color: ${indexCard.riskLevelColor}`"
                >{{ indexCard.riskLevel }}</span
            >，最新<span class="ranking-emphasize" :style="`color: ${indexCard.riskLevelColor}`"
                >指数为 {{ indexCard.riskScore }}</span
            >，<span class="ranking-emphasize" :style="`color: ${indexCard.riskLevelColor}`"
                >周环比{{ indexCard.riskRatio }}</span
            >
        </div> -->
    <div class="ranking-list" @click="pivotVisible = true">
      <rank-list
        :title="`各国家输入到${condition?.country?.name}的风险排名 Top10`"
        :columns="columns"
        :items="rankItems"
      >
        <template v-slot:riskPlace="record">
          <div class="item">
            <svg-icon :icon-class="record.icon" class="item-icon" />
            <span class="item-text">{{ record.riskPlace }}</span>
          </div>
        </template>
        <template v-slot:riskLevel="record">
          <div class="item">
            <span
              class="item-text"
              :style="`color: ${record.riskLevelColor}`"
              >{{ record.riskLevel }}</span
            >
          </div>
        </template>
        <template v-slot:riskScore="record">
          <div class="item">
            <span class="item-text text-value">{{ record.riskScore }}</span>
          </div>
        </template>
        <template v-slot:share="record">
          <div class="item">
            <span class="item-text text-value">{{ record.share }}</span>
          </div>
        </template>
        <template v-slot:trend="record">
          <div class="item">
            <tiny-chart
              v-if="record.trend && record.trend.length > 2"
              :values="record.trend"
              :options="{
                lineWidth: 1.5,
                height: 30,
              }"
            />
          </div>
        </template>
      </rank-list>
    </div>

    <el-dialog
      title="风险列表"
      custom-class="ranking-dialog"
      :visible.sync="pivotVisible"
      width="874px"
    >
      <ranking-pivot
        v-if="pivotVisible"
        :default="this.condition"
      ></ranking-pivot>
      <span slot="footer" class="ranking-dialog-footer">
        <el-button type="primary" @click="pivotVisible = false"
          >确 定</el-button
        >
        <el-button @click="pivotVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import RankList from "../components/RankList/index.vue";
import TinyChart from "../components/TinyChart/index.vue";
import RankingPivot from "./RankingPivot.vue";
import { indexCard, trendArea } from "../api/risk";

export default {
  name: "Ranking",
  components: { RankList, TinyChart, RankingPivot },
  props: ["condition"],
  data() {
    return {
      indexCard: {
        riskScore: 8.5,
        riskLevel: "高风险",
        riskLevelColor: "#cc3d55",
        ratio: 3.5,
      },
      loading: false,
      columns: [
        { key: "riskPlace", value: "国家/地区", width: "100px" },
        // { key: 'riskLevel', value: '风险等级', width: '70px' },
        // { key: "riskScore", value: "风险值", width: "65px" },
        { key: "share", value: "贡献占比", width: "65px" },
        { key: "trend", value: "趋势", width: "90px" },
      ],
      rankItems: [
        {
          riskPlace: "美国",
          riskLevel: 10,
          riskScore: "5.3434",
          trend: [2.3434, 5.3434, 2.34, 9.33, 6.77],
          icon: "US",
        },
        {
          riskPlace: "英国",
          riskLevel: 6,
          riskScore: "8.34",
          trend: [12.3434, 15.3434, 8.34, 9.33, 10.77],
          icon: "US",
        },
        {
          riskPlace: "法国",
          riskLevel: 3,
          riskScore: "10.77",
          trend: [12.3434, 15.3434, 18.34, 12.33, 10.77],
          icon: "US",
        },
        {
          riskPlace: "美国",
          riskLevel: 10,
          riskScore: "5.3434",
          trend: [2.3434, 5.3434, 2.34, 9.33, 6.77],
          icon: "US",
        },
        {
          riskPlace: "英国",
          riskLevel: 6,
          riskScore: "8.34",
          trend: [12.3434, 15.3434, 8.34, 9.33, 10.77],
          icon: "US",
        },
        {
          riskPlace: "法国",
          riskLevel: 3,
          riskScore: "10.77",
          trend: [12.3434, 15.3434, 18.34, 12.33, 10.77],
          icon: "US",
        },
        {
          riskPlace: "美国",
          riskLevel: 10,
          riskScore: "5.3434",
          trend: [2.3434, 5.3434, 2.34, 9.33, 6.77],
          icon: "US",
        },
        {
          riskPlace: "英国",
          riskLevel: 6,
          riskScore: "8.34",
          trend: [12.3434, 15.3434, 8.34, 9.33, 10.77],
          icon: "US",
        },
        {
          riskPlace: "法国",
          riskLevel: 3,
          riskScore: "10.77",
          trend: [12.3434, 15.3434, 18.34, 12.33, 10.77],
          icon: "US",
        },
        {
          riskPlace: "美国",
          riskLevel: 10,
          riskScore: "5.3434",
          trend: [2.3434, 5.3434, 2.34, 9.33, 6.77],
          icon: "US",
        },
      ],
      pivotVisible: false,
    };
  },
  computed: {
    // rankItems() {
    //     return this.items.map(item => {
    //         let rt = '低',
    //             rc = '#12B881'
    //         if (item.rank >= 10) {
    //             rt = '高'
    //             rc = '#E5455F'
    //         } else if (item.rank >= 5) {
    //             rt = '中'
    //             rc = '#E5455F'
    //         } else {
    //             rt = '低'
    //             rc = '#12B881'
    //         }
    //         return { ...item, rankText: rt, rankColor: rc }
    //     })
    // },
    riskRatio() {
      return (this.ratio >= 0 ? "上升" : "下降") + " " + this.ratio + "%";
    },
  },
  mounted() {
    // this.fetchData()
  },
  methods: {
    fetchData() {
      const { ruleId, country, from, date } = this.condition;
      this.loading = this.$loading({
        target: this.$el,
      });
      Promise.all([
        indexCard({
          origin_area: from?.code,
          destination_area: country?.code,
          date,
          ruleId,
        }),
        trendArea({
          origin_area: from?.code,
          destination_area: country?.code,
          date,
          ruleId,
        }),
      ])
        .then((res) => {
          const { data: indexRes } = res[0];
          const { data: rankRes } = res[1];
          this.indexCard = indexRes || {};
          this.rankItems = rankRes
            ?.slice(0, 10)
            .filter((r) => r.share != null)
            .map((r) => ({
              riskPlace: r.originAreaName || "",
              riskScore: r?.riskScore ?? 0,
              riskLevel: r.riskLevel || "",
              riskLevelColor: r.riskLevelColor || "",
              share: r.share,
              //   trend:
              //     r?.trend?.slice(0, 28).map((v) => v.value?.riskScore ?? 0) ??
              //     [],
              trend: r?.trend
                // ?.filter(
                //   (v) =>
                //     !isNaN(v.value?.riskScore) &&
                //     typeof v.value?.riskScore === "number"
                // )
                .map((v, i) => v.value?.riskScore),
              // .map((v, i) => null),
              icon: String(r.originArea || r.area)
                .substring(0, 2)
                .toUpperCase(),
            }));

          //   rankRes.forEach((element) => {
          //     console.log(
          //       element.originAreaName,
          //       element.trend.slice(0, 28).map((v) => v.value?.riskScore ?? 0)
          //     );
          //   });
        })
        .finally(() => {
          this.loading.close();
        });
    },
  },
  watch: {
    condition() {
      this.fetchData();
    },
  },
};
</script>
<style lang="scss" scoped>
.ranking {
  /* Frame 514678121 */

  /* Auto layout */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px;
  gap: 24px;
  position: relative;
  overflow: hidden;

  min-width: 300px;
  width: 100%;
  height: 470px;
  min-height: 360px;

  /* N9 */
  background: #ffffff;
  border-radius: 8px;
  &-ellipse {
    /* Ellipse 6151 */

    position: absolute;
    width: 200px;
    height: 200px;
    left: 0px;
    top: 0px;

    /* 红色/R1 */
    // background: #e6455f;
    background: #adf2ff;
    opacity: 0.3;
    filter: blur(100px);
    z-index: 1;
  }
  &-overview {
    /* Auto layout */
    // display: flex;
    // flex-direction: column;
    // align-items: flex-start;
    padding: 0px;
    gap: 8px;

    /* 最新风险等级为高风险，最新指数为 8.5，周环比上升 3.5% */

    width: 272px;
    height: 40px;

    /* Base/UI */
    font-family: "PingFang SC";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    /* or 143% */

    /* N1 */
    color: #1f264d;

    width: 272px;
    height: 40px;
    z-index: 2;
  }
  &-emphasize {
    /* Base/UI */
    font-family: "PingFang SC";
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    /* or 143% */

    /* 红色/R0 */
    color: #cc3d55;
  }
  &-list {
    z-index: 2;
    cursor: pointer;
    .item {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      height: 32px;
      width: 100%;

      &-icon {
        font-size: 18px;
        // width: 16px;
        // height: 16px;
        border-radius: 50%;
        margin-right: 5px;
      }
      &-text {
        /* 美国 */

        width: 100%;
        height: 18px;

        /* H5-12px */
        font-family: "PingFang SC";
        font-style: normal;
        font-weight: 500;
        font-size: 12px;
        line-height: 18px;
        /* identical to box height, or 133% */

        /* N1 */
        color: #1f264d;

        &.text-value {
          color: #1f264d;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.ranking-dialog {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  background: #ffffff;
  border-radius: 4px;
  width: auto;

  .el-dialog__header {
    padding: 0px 24px;
    // padding-bottom: 8px;

    width: calc(100% - 48px);
    height: 56px;
    line-height: 52px;
    /* N6 */
    // border-bottom: 1px solid #e6e9f2;

    .el-dialog__title {
      height: 22px;
      font-family: "PingFang SC";
      font-style: normal;
      font-weight: 600;
      font-size: 16px;
      line-height: 20px;

      color: #1f264d;
    }
  }
  .el-dialog__body {
    padding: 0;
    width: 100%;
    border-top: 1px solid #e6e9f2;
  }

  .el-dialog__footer {
    width: 100%;
    background: #ffffff;
    border-top: 1px solid #e6e9f2;
  }

  &-footer {
    .el-button {
      height: 32px;
      /* H4-14px */
      font-family: "PingFang SC";
      font-style: normal;
      font-weight: 500;
      font-size: 14px;
      line-height: 18px;
      padding: 4px 16px;
      border-radius: 2px;
    }
  }
}
</style>
